<template>
  <div class="app-container">
    <!-- 基础信息 -->
    <h5 class="titleInfo">基础信息</h5>
    <el-form
      ref="form"
      v-loading="tableLoading"
      :inline="true"
      :model="form"
      :rules="rules"
      label-width="150px"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="发起人姓名">
            <el-input v-model="form.realname" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="发起人手机号">
            <el-input v-model="form.phone" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="身份证号">
            <el-input v-model="form.legalName" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="银行卡号">
            <el-input v-model="form.legalIdCard" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="开户行">
            <el-input v-model="form.organCode" />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 签约信息 -->
      <div class="divBar" />
      <h5 class="titleInfo">签约信息</h5>
      <el-row>
        <el-col :span="12">
          <el-form-item label="发起人类型">
            <el-select v-model="form.agentName" placeholder="请选择发起人类型">
              <el-option
                v-for="item in promoterTypeArray"
                :key="item.id"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="发起人类型" prop="agentName">
            <el-input v-model="form.agentName" />
          </el-form-item>-->
        </el-col>
        <el-col :span="12">
          <el-form-item label="签署板块">
            <el-select v-model="form.agentPhone" placeholder="请选择签署板块">
              <el-option
                v-for="item in moduleArray"
                :key="item.id"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="签署区域">
            <el-select v-model="form.agentIdentity" placeholder="请选择签署区域">
              <el-option
                v-for="item in regionArray"
                :key="item.id"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="签署省份">
            <el-select v-model="form.province" placeholder="请选择省">
              <!-- @change="provinceChanged" -->
              <el-option
                v-for="item in provinceArray"
                :key="item.id"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <!-- <div>
              <el-tag
                v-for="tag in dynamicTags"
                :key="tag.value"
                closable
                :disable-transitions="false"
                @close="handleClose(tag)"
              >{{ tag.label }}</el-tag>
            </div>-->
          </el-form-item>
        </el-col>
        <!-- 新增签约时间 -->
        <el-col :span="12">
          <el-form-item label="签署时间">
            <el-date-picker
              v-model="form.pay_time"
              type="datetime"
              placeholder="请选择"
              align="right"
              value-format="yyyy-MM-dd HH:mm:ss"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button
          style="margin-top:30px;margin-left:130px"
          type="primary"
          @click="submitFn('form')"
        >立即提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import {
  promoterAdd,
  promoterCreate,
  promoterUpdate,
  promoterShow,
} from "@/api/NewRetailSystem";

export default {
  name: "FilialeFOEdit",
  filters: {},
  data() {
    var validatePassword = (rule, value, callback) => {
      // const isRate = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/;
      const isRate = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,}$/;
      if (!value) {
        // alert('空')
        callback(new Error("请输入密码"));
        // this.warningStatus("请输入密码!");
      } else if (!isRate.test(value)) {
        callback(
          new Error("密码需不低于8位，至少使用一个字母+数字，不可使用特殊字符")
        );
        // this.warningStatus("请输入正确密码");
      } else {
        callback();
      }
    };
    return {
      totalUnion: "",
      totalGm: "",
      tableLoading: false,
      flag: false,
      loadingCity: false,
      city: "",
      citychild: "",
      type: "",
      moduleArray: [], // 签署板块
      promoterTypeArray: [], // 发起人类型
      regionArray: [], // 签署区域
      provinceArray: [], // 签署省份
      cities: [],
      dynamicTags: [],
      //
      officeId: "",
      form: {
        officeId: "",
        realname: "",
        phone: "",
        legalName: "",
        legalIdCard: "",
        organCode: null,
        organType: null,
        companyType: 0,
        foundingTime: "",
        legalLocate: null,
        userType: null,
        scope: "",
        officeType: null,
        agentName: "",
        agentPhone: "",
        agentIdentity: "",
        email: "",
        areas: [],
        address: [],
        password: "",
        totalGm: null,
        totalUnion: null,
        province: null,
        city: null,
        pay_time: "",
      },
      rules: {
        password: [
          {
            validator: validatePassword,
            required: true,
            trigger: "blur",
          },
        ],
        province: [
          {
            required: true,
            message: "请选择省市",
            trigger: "change",
          },
        ],
      },
      options: [],
    };
  },
  watch: {
    // 监听地区选项
    "form.address": function (val) {},
  },
  created() {
    // 获取下拉选信息
    promoterCreate({})
      .then((res) => {
        console.log(res);
        // 签署板块
        if (res.data.code == 0) {
          const resData = res.data.data;
          if (resData.moduleArray) {
            const arr = [];
            resData.moduleArray.forEach((item) => {
              arr.push({
                label: item.name,
                value: item.id,
              });
            });
            this.moduleArray = arr;
          }
          // 发起人类型
          if (resData.promoterTypeArray) {
            const arr = [];
            resData.promoterTypeArray.forEach((item) => {
              arr.push({
                label: item.name,
                value: item.id,
              });
            });
            this.promoterTypeArray = arr;
          }
          // 签署区域
          // this.regionArray = res.data.data.regionArray;
          if (resData.regionArray) {
            const arr = [];
            resData.regionArray.forEach((item) => {
              arr.push({
                label: item.area_name,
                value: item.id,
              });
            });
            this.regionArray = arr;
          }
          // 省份
          // this.provinceArray = res.data.data.provinceArray;
          if (resData.provinceArray) {
            const arr = [];
            resData.provinceArray.forEach((item) => {
              arr.push({
                label: item.area_name,
                value: item.id,
              });
            });
            this.provinceArray = arr;
          }
          console.log(res);
        }
      })
      .catch((res) => {
        this.$message.error("网络连接错误，请稍后再试");
      });
    // this.getArea();
  },
  mounted() {
    this.officeId = Number(this.$route.query.id);
    this.type = this.$route.query.type;
    console.log("111", this.$route.query);
    if (this.type == "edit") {
      this.$route.meta.title = "编辑发起人";
      this.getDetails(this.officeId);
    } else {
      console.log("揍你");
      this.$route.meta.title = "添加发起人";
    }

    // this.getDetails();
  },
  methods: {
    getDetails(id) {
      const data = { id };
      promoterShow(data).then((res) => {
        console.log("res", res.data);
        if (res.data.code == 0) {
          const resData = res.data.data;
          this.form.realname = resData.realname;
          this.form.phone = resData.phone;
          this.form.legalName = resData.id_number;
          this.form.legalIdCard = resData.bank_number;
          this.form.organCode = resData.bank_name;
          this.form.pay_time = resData.sign_time;
          if (resData.promoterTypeArray) {
            const arr = [];
            resData.promoterTypeArray.forEach((item) => {
              arr.push({
                label: item.name,
                value: item.id,
              });
            });
            this.promoterTypeArray = arr;
            this.form.agentName = resData.level_id;
          }
          if (resData.moduleArray) {
            const arr = [];
            resData.moduleArray.forEach((item) => {
              arr.push({
                label: item.name,
                value: item.id,
              });
            });
            this.moduleArray = arr;
            this.form.agentPhone = resData.module_id;
          }
          if (resData.regionArray) {
            const arr = [];
            resData.regionArray.forEach((item) => {
              arr.push({
                label: item.area_name,
                value: item.id,
              });
            });
            this.regionArray = arr;
            this.form.agentIdentity = resData.partner_area_id;
          }
          if (resData.provinceArray) {
            const arr = [];
            resData.provinceArray.forEach((item) => {
              arr.push({
                label: item.area_name,
                value: item.id,
              });
            });
            this.provinceArray = arr;
          }
          this.form.province = resData.partner_province_id;
        }
      });
    },
    // 提交
    submitFn(e) {
      // console.log("form", this.form);
      let datas;
      if (this.type == "edit") {
        datas = {
          partner_identity_id: this.officeId,
          phone: this.form.phone,
          level: this.form.agentName,
          module_id: this.form.agentPhone,
          id_number: this.form.legalName,
          bank_number: this.form.legalIdCard,
          bank_name: this.form.organCode,
          realname: this.form.realname,
          partner_area_id: this.form.agentIdentity,
          partner_province_id: this.form.province,
          partner_signtime: this.form.pay_time,
        };
        promoterUpdate(datas).then((res) => {
          if (res.data.code == 200) {
            this.$message({
              message: "修改成功",
              type: "success",
            });
            this.$router.push("/SponsorManagement");
          } else {
            this.$message({
              message: res.data.msg,
              type: "warning",
            });
          }
        });
      } else {
        datas = {
          realname: this.form.realname,
          phone: this.form.phone,
          level: this.form.agentName,
          module_id: this.form.agentPhone,
          id_number: this.form.legalName,
          bank_number: this.form.legalIdCard,
          bank_name: this.form.organCode,
          partner_signtime: this.form.pay_time,
          partner_area_id: this.form.agentIdentity,
          partner_province_id: this.form.province,
        };
        promoterAdd(datas).then((res) => {
          // console.log("ress", res.data);
          if (res.data.code == 200) {
            this.$message({
              message: "添加成功",
              type: "success",
            });
            this.$router.push("/SponsorManagement");
          } else {
            this.$message({
              message: res.data.msg,
              type: "warning",
            });
          }
        });
      }

      return;
      console.log(this.dynamicTags);
      console.log();
      this.form.areas = [];
      if (this.dynamicTags.length == 0) {
        this.$message({
          message: "选择地区",
          type: "warning",
        });
        return;
      }
      this.dynamicTags.map((res) => {
        this.form.areas.push(res.value);
      });

      this.$refs[e].validate((valid) => {
        if (valid) {
          const datas = {
            areas: this.form.areas,
            password: this.form.password,
            totalGm: Number(this.form.totalGm),
            totalUnion: Number(this.form.totalUnion),
            officeId: this.officeId,
          };
          console.log(datas);
          filialeFOIndexListEdit(datas).then((res) => {
            if (res.data.code == 0) {
              this.$message({
                message: "修改成功",
                type: "success",
              });
              this.$router.push("/FilialeFOIndex");
            } else {
              this.$message({
                message: res.data.msg,
                type: "warning",
              });
            }
          });
        } else {
          this.$message({
            message: "必填项不能为空",
            type: "warning",
          });
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
.app-container {
  padding: 0px !important;
}
.form {
  margin-left: 268px;
}
.el-switch__label--left {
  margin-right: 0;
}
.el-switch__label.is-active {
  color: #409eff !important;
  width: 100%;
  text-align: center;
  display: inline-block;
}
</style>
